<!-- 门诊缴费 -->
<template>
	<view>
		<view class="tabs-wrapper">
			<liuyuno-tabs :tabData="tabsData" :defaultIndex="1" @tabClick="tabClick" />
		</view>
		<view class="list-wrapper" v-show="currentTabIndex == 0">
			<view class="item" v-for="(item, index) in waitPayList" :key="index" @click="goToWaitDetailPage(item)">
				<p class="time">单号【{{item.BillId}}】</p>
				<uni-tag class="float-right" :circle="true" :text="'￥'+item.Money" type="default" size="mini" />
				<div class="clearfix"></div>
				<p>患者姓名：{{item.PatientName}}</p>
				<p>开单科室：{{item.Department}}</p>
				<p>开单医生：{{item.Doctor}}</p>
			</view>
			<u-empty v-if="waitPayList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<view class="list-wrapper" v-show="currentTabIndex == 1">
			<uni-datetime-picker v-model="range" type="daterange" @change="dateRangeChangeHandler" />
			<div style="margin-bottom: 10px;"></div>
			<view class="item" v-for="(item, index) in alreadyPayList" :key="index" @click="goToAlreadyPayDetailPage(item)">
				<p class="time">单号【{{item.BillId}}】<span v-if="item.Ifpay == '2'" style="color: red;">已退款</span></p>
				<uni-tag class="float-right" :circle="true" :text="'￥'+item.Money" type="success" size="mini" />
				<div class="clearfix"></div>
				<p>患者姓名：{{item.PatientName}}</p>
				<p>开单科室：{{item.DepartmentName}}</p>
				<p>开单医生：{{item.DoctorName}}</p>
			</view>
			<u-empty v-if="alreadyPayList.length == 0" mode="list" text="未找到结果, 请选择合适的日期范围" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				tabsData: [{
						state: 1,
						name: '今日待缴'
					},
					{
						state: 2,
						name: '已缴费'
					}
				],
				currentTabIndex: 0,
				waitPayList: [],
				alreadyPayList: [],
				range: [],
				title: '澄迈县妇幼保健院小程序-门诊缴费',
				thumb: ''
			}
		},
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onLoad() {
			this.api_unpaidlist()
		},
		methods: {
			tabClick(val) {
				this.currentTabIndex = val
				if (val == '0') {
					this.api_unpaidlist()
				} else if(val == '1') {
					this.api_paidlist()
				}
			},

			goToWaitDetailPage(item) {
				uni.navigateTo({
					url: '/pagesB/pay/waitPayDetail?item=' + JSON.stringify(item)
				})
			},
			
			goToAlreadyPayDetailPage(item) {
				uni.navigateTo({
					url: '/pagesB/pay/alreadyPayDetail',
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detail', { data: item })
					}
				})	
			},

			/**
			 * 查询门诊待缴费列表
			 */
			api_unpaidlist() {
				let openid = uni.getStorageSync('openid')
				this.waitPayList = []
				let currentUserCard = uni.getStorageSync('current_user_card')
				this.$app._post_form2("entry/wxapp/apipayment.unpaidlist", {
					"cardid": currentUserCard.numcard,
					"timezone": "0",
					"openid": openid
				}, (res) => {
					console.log(res)
					if (res.status == '1' && res.data != 'none') {
						this.waitPayList = res.data
					}
				})
			},

			api_paidlist() {
				if (this.range.length > 0) {
					this.alreadyPayList = []
					let openid = uni.getStorageSync('openid')
					let currentUserCard = uni.getStorageSync('current_user_card')
					this.$app._post_form2("entry/wxapp/apipayment.paidlist", {
						"cardid": currentUserCard.numcard,
						"openid": openid,
						"pageidx": "1",
						"pagesize": "1000",
						"starttime": this.range[0] + ' 00:00:00',
						"endtime": this.range[1] + ' 23:59:59'
					}, (res) => {
						console.log(res)
						if (res.status == '1' && res.data != 'none') {
							this.alreadyPayList = res.data
						}
					})
				}
			},

			dateRangeChangeHandler(e) {
				console.log('dateRangeChangeHandler:', e);
				this.api_paidlist()
			}
		}
	}
</script>

<style>
	>>>._item._active {
		color: #41C177 !important;
	}

	>>>._underline {
		background-color: #41C177 !important;
	}
</style>

<style scoped lang="scss">
	.tabs-wrapper {
		background-color: #fff;
	}

	.list-wrapper {
		padding: 10px;

		.item {
			padding: 10px;
			background-color: #fff;
			border-radius: 8px;
			color: #757575;
			font-size: .8rem;
			margin-bottom: 5px;

			p {
				line-height: 25px;
			}

			.time {
				color: #ff9800;
				float: left;
			}
		}
	}
</style>